<template>
  <div id="driverlist">
    <h1 class="titleTag">司机管理</h1>
    <el-form :inline="true" class="formone mt24" :rules="rules">
      <el-form-item prop='name'>
        <el-input v-model="name" placeholder="司机姓名" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="value" lable="审核状态" placeholder="审核状态" size="small">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="querySome()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="resetForm()">清空</el-button>
      </el-form-item>
    </el-form>
    <div class="tableDetail">
      <el-table :data="tableData" height="620" style="width: 100%;">
        <el-table-column label="司机信息" min-width="270">
          <template slot-scope="data">
            <div class="fb"><span>司机姓名</span><span>{{ data.row.carOwner }}</span></div>
            <div class="fb"><span>司机手机号</span><span>{{ data.row.phone }}</span></div>
            <div class="fb"><span>司机性别</span><span>{{ data.row.creditCode }}</span></div>
          </template>
        </el-table-column>
        <el-table-column label="所属承运商" min-width="270">
          <template slot-scope="data">
            <div class="fb"><span>{{ data.row.name }}</span></div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="data">
            <span>{{ data.row.status  | statusNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="驾驶证类型" min-width="270">
          <template slot-scope="data">
            <div class="fb"><span>{{ data.row.name }}</span></div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="证件查看" width="140">
          <template slot-scope="scope">
            <div class="fb"><span>身份证正面</span><el-button @click="handleClick(scope.row.idenFaceImg)" type="text" size="small">查看</el-button></div>
            <div class="fb"><span>身份证反面</span><el-button @click="handleClick(scope.row.idenBackImg)" type="text" size="small">查看</el-button></div>
            <div class="fb"><span>驾驶证正面</span><el-button @click="handleClick(scope.row.drivlicFaceImg)" type="text" size="small">查看</el-button></div>
            <div class="fb"><span>驾驶证反面</span><el-button @click="handleClick(scope.row.drivlicBackImg)" type="text" size="small">查看</el-button></div>
          </template>
        </el-table-column>
        <el-table-column label="信用评估" min-width="270">
          <template slot-scope="data">
            <div class="fb"><span>{{ data.row.name }}</span></div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="270">
          <template slot-scope="data">
            <div class="fb"><span>{{ data.row.name }}</span></div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="90">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="review(scope.row)">审核</el-button>
            <el-button @click="reject(scope.row.driid)" type="text" size="small">驳回</el-button>
            <!-- <el-button v-show="" @click="reject(scope.row.userid,scope.row.idenid)" type="text" size="small">停用</el-button>
            <el-button v-show="" @click="reject(scope.row.userid,scope.row.idenid)" type="text" size="small">启用</el-button>
            <el-button v-show="" @click="reject(scope.row.userid,scope.row.idenid)" type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="证件" :visible.sync="dialogTableVisible">
      <img style="width:100%: overflow: hidden" :src="imgUrl" alt="" srcset="">
    </el-dialog>
    <!-- 驳回理由 -->
    <el-dialog class="dialog" title="驳回理由" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form :inline="true" style="text-align: center;" class="mt24">
        <el-form-item label="">
          <el-input style="width: 400px" type="textarea" :rows="5" placeholder="请输入内容" v-model="reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureReject">确认</el-button>
        <el-button @click="centerDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { apiDriverList, apiRejectDriver } from "@/utils/api";
export default {
  name: "driverlist",
  filters: {
    statusNum(value) {
      const status = ["已认证", "待审核", "未通过"];
      return status[value - 1];
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      dialogVisible: false,
      centerDialogVisible: false,
      driid: "",
      imgUrl: "",
      name: "",
      value: '',
      reason: "",
      options: [
        {
          value: "1",
          label: "审核通过"
        },
        {
          value: "0",
          label: "未通过"
        },
        {
          value: "2",
          label: "待审核"
        }
      ],
      tableData: [
        // {
        //   company: "大投商务贸易有限公司",
        //   code: "G15226532225514",
        //   name: "法人名字",
        //   id: "142566336320522556",
        //   status: "未审核"
        // },
        // {
        //   company: "大投商务贸易有限公司",
        //   code: "G15226532225514",
        //   name: "法人名字",
        //   id: "142566336320522556",
        //   status: "审核通过"
        // },
        // {
        //   company: "大投商务贸易有限公司",
        //   code: "G15226532225514",
        //   name: "法人名字",
        //   id: "142566336320522556",
        //   status: "审核通过"
        // }
      ],
    
    };
  },
  created() {
    this.query(1,10,1);
  },
  mounted() {},
  methods: {
    // 查询列表
    query(type,size,page) {
      apiDriverList({
        name: type==1?'':this.name,
        status: '',
        pageSize: size,
        pageNumber: page,
      })
        .then(res => {
          this.tableData = res.data.records;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 审核
    review(data) {
      // console.log(userid, idenid);
      this.$router.push({
        path: "/driverwrite",
        query: { data: data }
      });
    },
    handleClick(val) {
      console.log(val);
      this.dialogTableVisible = true;
      this.imgUrl = val;
    },

    // 驳回
    reject(driid) {
      this.centerDialogVisible = true;
      this.driid = driid;
    },
    sureReject() {
      this.centerDialogVisible = false;
      apiRejectDriver({
        driid: this.driid,
        remarks: this.reason
      })
        .then(res => {
          this.$message({ message: "已驳回", type: "success" });
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteSure(index, rows) {
      this.dialogVisible = true;
      this.$confirm("确认删除？")
        .then(() => {
          // done();
          rows.splice(index, 1);
        })
        .catch(_ => {});
    },
    // 清空
     resetForm(){
      this.name='';
      this.value='';
    }
  }
};
</script>

<style lang="scss" scoped>
#driverlist {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  // 设置宽高
  .tableDetail span {
    line-height: 35px;
  }
}
</style>
